<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Buff</title>
	</head>
	<body>
		<h1>Buff</h1>
		<form id="addForm">
			<label for="goodsId">饰品ID:</label>
			<input type="text" id="goodsId" name="goodsId" value="45456" required><br><br>
			<label for="expectedPrice">价格:</label>
			<input type="number" step="0.01" id="minPrice" name="expectedPrice" value="10" required>
			<input type="number" step="0.01" id="maxPrice" name="expectedPrice" value="100" required><br><br>
			<label for="expectedPaintwear">磨损:</label>
			<input type="number" step="0.0001" id="minPaintwear" name="expectedPaintwear" value="0.0001" required>
			<input type="number" step="0.0001" id="maxPaintwear" name="expectedPaintwear" value="0.1234"
				required><br><br>
			<button type="submit">添加</button>
		</form>
		<h2>饰品信息</h2>
		<table id="goodsTable">
			<tr>
				<th>饰品ID</th>
				<th>价格</th>
				<th>磨损</th>
				<th>操作</th>
			</tr>
		</table>
	</body>
</html>
<script type="text/javascript" src="popup.js"></script>
<style>
	body {
		width: 400px;
		font-family: Arial, sans-serif;
	}

	h1 {
		text-align: center;
		color: #333;
	}

	form {
		margin-top: 20px;
	}

	label {
		font-weight: bold;
		display: block;
		margin-bottom: 10px;
	}

	input[type="text"],
	input[type="number"] {
		width: 100%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		/* font-size: 16px; */
	}

	button {
		text-align: center;
		padding: 10px 20px;
		background-color: #4CAF50;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	button:hover {
		background-color: #3E8E41;
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}

	th {
		text-align: center;
		color: #333;
	}

	th,
	td {
		padding: 20px;
		border: 1px solid #ccc;
	}

	tr:hover {
		background-color: #f5f5f5;
	}
</style>